<template>
  <div class="rightTop_container">
      <!-- 第一个 -->
    <div class="data_content">
      <div class="top_title">430 入料流量</div>
      <div class="top_data">
          <div class="top_data_item" v-for="(item,index) in flowData.slice(0,4)" :key="index" >
            <div class="“top_item_txt">{{ item.txt }}</div>
            <div class="top_item_val">{{ item.val }}</div>
         </div>
      </div>
    </div>
    <!-- 第二个 -->
   <div class="data_content">
      <div class="top_title">431 入料流量</div>
      <div class="top_data">
          <div class="top_data_item" v-for="(item,index) in flowData.slice(4,8)" :key="index" >
            <div class="“top_item_txt">{{ item.txt }}</div>
            <div class="top_item_val">{{ item.val }}</div>
         </div>
      </div>
    </div>
    <!-- 第三个 -->
    <div class="data_content">
      <div class="top_title">433 入料流量</div>
      <div class="top_data">
          <div class="top_data_item" v-for="(item,index) in flowData.slice(8,12)" :key="index" >
            <div class="“top_item_txt">{{ item.txt }}</div>
            <div class="top_item_val">{{ item.val }}</div>
         </div>
      </div>
    </div>
    <!-- 第四个 -->
    <div class="data_content">
      <div class="top_title">434 入料流量</div>
      <div class="top_data">
          <div class="top_data_item" v-for="(item,index) in flowData.slice(12,16)" :key="index" >
            <div class="“top_item_txt">{{ item.txt }}</div>
            <div class="top_item_val">{{ item.val }}</div>
         </div>
      </div>
    </div>
</div>
</template>
<script>
export default {
  props: {
    real: {
      type: Object,
    },
  },
  computed:{
      flowData(){
            var flowArr=[]
                for(var key in this.real){
                    if(key.indexOf("LL_4") != -1){
                        flowArr.push({
                            txt:key.slice(3) + "#",
                            val:this.real[key].toFixed(2)
                        })
                    }
                }
            console.log(flowArr,66)
            return flowArr
        }
  }
};
</script>
<style lang="scss">
.rightTop_container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  font-size: 0.2rem;
  color:#fff;
}
.data_content{
    width: 100%;
    height: calc(100% / 4.2 );
    border: 1px solid #00def8;
    border-radius: 10px;
    box-sizing: border-box;
    padding: 0.2rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}
.top_title{
    width: 100%;
    height: 30%;
    text-align: center;
    font-weight: bold;
    padding: 0.1rem 0;
}
.top_data{
    width: 100%;
    height: 70%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}
.top_data_item{
    width: 40%;
    height: calc(100% / 2);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.top_item_txt{
    width: 0.5rem;
    text-align: center;
}
.top_item_val{
    background: #000;
    padding: 0.1rem;
    width: 0.8rem;
    text-align: center;
    color: #52c41a;
    font-weight: 600;
}
</style>